<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>书籍阅读器</title>
    <link href="/static/css/layui.css" rel="stylesheet">
    <link href="/static/css/index.css" rel="stylesheet">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/jquery.cookie.js"></script>
</head>
<body>
    <div class="sidebar">
        <div class="menu-item" data-target="home">首页</div>
        <div class="menu-item" data-target="chapters">目录</div>
        <div class="menu-item" data-target="settings">设置</div>
        <div class="menu-item" data-target="search">搜索</div>
    </div>
    <div class="container">
        <div id="home" class="book-info active">
            <h2>书籍阅读器</h2>
            <input type="hidden" name="0" id="book_id">
            <p>
                <span onclick="get_books()">更新</span>&nbsp;&nbsp;&nbsp;<span>
            </p>
            <div class="bookshelf" id="bookshelf">
                <!-- 书籍列表 -->
            </div>
        </div>
        <div id="chapters" class="chapters">
            <input type="hidden" name="0" id="chapter_id">
            <input type="hidden" name="0" id="start_page">
            <input type="hidden" name="0" id="end_page">
            <p>
                <span onclick="get_menus(-1)">上一页</span>&nbsp;&nbsp;&nbsp;
                <span onclick="get_menus(2)">下一页</span>&nbsp;&nbsp;&nbsp;
                <span onclick="get_new_chapter(1)">更新</span>&nbsp;&nbsp;&nbsp;
                <span onclick="get_new_chapter(2)">取消更新</span>&nbsp;&nbsp;&nbsp;
                <span onclick="delete_book_shelf()">删除</span>&nbsp;&nbsp;&nbsp;
            </p>
            <ul id="chapter-list">
                <!-- 章节列表 -->
            </ul>
        </div>
		<div id="search" class="search">
            <div class="search_div">
                <p>
                    <span><input type="text" id="search_input" placeholder="请输入书名" class="layui-input"></span>
                    <form class="layui-form"> 
                        <div class="layui-form-item">
                            <label class="layui-form-label">驱动源</label>
                            <div class="layui-input-block">
                                <input type="radio" name="driver" value="BQG" title="BQG">
                                <input type="radio" name="driver" value="NewBQG" title="NewBQG" checked>
                                <input type="radio" name="driver" value="ThreeQRead" title="ThreeQRead">
                            </div>
                        </div>
                    </form>
                    <button onclick="search_books()" class="layui-btn layui-btn-radius" style="margin-top: 1%;">搜索</button>
                </p>
            </div>
            <div class="bookshelf" id="book_search">

            </div>
        </div>
        <div id="settings" class="settings">
            <h2>内容设置</h2>
            <div class="setting_div">
                <label for="content_font-size">字体大小：</label>
                <select id="content_font-size">
                    <option value="0.5rem">0.5rem</option>
                    <option value="1rem">1rem</option>
                    <option value="1.5rem">1.5rem</option>
                    <option value="2rem">2rem</option>
                    <option value="2.5rem">2.5rem</option>
                    <option value="3rem">3rem</option>
                </select>
            </div>
            <div class="setting_div">
                <label for="content_bg-color">背景颜色：</label>
                <select id="content_bg-color">
                    <option value="#1e1e1e">黑色</option>
                    <option value="#ffffff">白色</option>
                    <option value="#f5f5f5">浅灰色</option>
                </select>
            </div>
            <h2>全局设置</h2>
            <div class="setting_div">
                <label for="font-size">字体大小：</label>
                <select id="font-size">
                    <option value="12px">12px</option>
                    <option value="14px">14px</option>
                    <option value="16px">16px</option>
                    <option value="18px">18px</option>
                </select>
            </div>
            <div class="setting_div">
                <label for="bg-color">背景颜色：</label>
                <select id="bg-color">
                    <option value="#1e1e1e">黑色</option>
                    <option value="#ffffff">白色</option>
                    <option value="#f5f5f5">浅灰色</option>
                </select>
            </div>
        </div>
        <div id="chapter-content" class="chapter-content"></div>
    </div>

    <div class="loading-overlay">
        <div class="spinner-container">
            <div class="spinner"></div>
        </div>
    </div>
</body>
<script src="/static/layui.js"></script>
<script src="/static/js/base.js"></script>
<script src="/static/js/utils.js"></script>
<script src="/static/js/index.js"></script>
<script>
    layui.use(function(){
        init_util();
    });
</script>
</html>